<script>
import * as echarts from 'echarts';

export default {
  name: 'IncomeStatistics',
  data() {
    return {};
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(document.querySelector('.income-statistics-container'));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '跳跳蛙',
            type: 'bar',
            emphasis: {
              focus: 'series',
            },
            data: [332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330, 320],
            itemStyle: {
              normal: {
                color: '#ffc100'
              },
            }
          },
          {
            name: '炸鸡套餐',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series',
            },
            data: [120, 132, 101, 134, 90, 230, 210, 332, 301, 334, 390, 330, 320],
            itemStyle: {
              normal: {
                color: '#000000'
              },
            }
          },
        ],
      });
    },
  },
  mounted() {
    this.initEcharts();
  },

};
</script>

<template>
  <div class="income-statistics-container">

  </div>
</template>

<style scoped lang="scss">
.income-statistics-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 350px;
  background-color: #fff;
  padding: 20px;
}
</style>
